<template>
  <div>
    <el-table
      ref="table"
      :data="searchComment ? searchComment : reports"
      style="width: 100%"
      max-height="560px"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="reporter"
        label="举报人"
        width="100">
      </el-table-column>
      <el-table-column label="举报评论">
        <el-table-column
          show-overflow-tooltip=""
          prop="comment.user_name"
          label="评论用户"
          width="150">
        </el-table-column>
        <el-table-column
          prop="comment.content"
          label="评论内容"
          width="250">
        </el-table-column>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip=""
        prop="report_reason"
        label="举报原因"
        width="220">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="report_detail"
        label="举报详情"
        width="220">
      </el-table-column>
      <el-table-column>
        <template slot="header">
          <el-input
            style="width: 200px;"
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <!-- 通过，弹出确认框，确认通过 -->
          <el-button type="primary" size="small" @click="passAudit(scope.row.report_id)">通 过</el-button>
          <!-- 不通过，弹出对话框，选择不通过原因，确定不通过 -->
          <el-button type="danger" size="small" @click="failAudit(scope.row.report_id)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button type="danger" @click="passAll()" :disabled="!reports">全部通过</el-button>
      <el-button type="danger" @click="failAll()" :disabled="!reports">全部不通过</el-button>
    </div>
  </div>
</template>

<script>
  import { getComment, passAudit, failAudit } from 'network/reportAudit'
  import { getUserById } from 'network/users'
  import { getReason } from 'network/auditReason'
  import { getCommentById } from 'network/comment'
  import { getReasonById } from 'network/reportReason'

  export default {
    name: 'CommentReport',
    data() {
      return {
        // 表格数据
        reports: [],
        // 搜索对应的数据
        searchComment: null,
        // 被选中的行
        multipleSelection: [],
        // 表单宽度
        formLabelWidth: '120px',
        // 搜索关键词
        search: '',
        // 审核不通过原因
        reasons: []
      }
    },
    methods: {
      // 多选框被选中时，保存被选中的数据
      handleSelectionChange(val) {
        this.multipleSelection = val
      },

      // 通过审核
      passAudit(id) {
        this.$confirm('是否确定通过该评论举报审核？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          passAudit(id).then(res => {
            if (res.status === 1) return this.$message({
              type: 'error',
              message: res.message
            })
            this.getReports()
            this.$message({
              type: 'success',
              message: '审核举报通过！'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消！'
          })    
        })
      },

      // 全部通过审核 
      passAll() {
        if (this.multipleSelection.length === 0) {
          return this.$message({
            type: 'error',
            message: '没有选中任何数据！'
          })
        }
        this.$confirm('此操作将通过所有评论举报审核, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let status = 0
          this.multipleSelection.forEach(item => {
            passAudit(item.report_id).then(res => {
              if (res.status === 1) {
                status = 1
                console.log(res.message)
                return
              }
              // 审核通过，重新获取待审核文章举报 
              this.getReports()
            })
          })
          if (status === 1) return this.$message({
            type: 'error',
            message: '审核通过失败！'
          })
          this.$message({
            type: 'success',
            message: '审核所有评论举报成功！'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作！'
          })    
        })
      },

      // 审核不通过
      failAudit(id) {
        this.$confirm('是否确定不通过该文章举报审核？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          failAudit(id).then(res => {
            if (res.status === 1) return this.$message({
              type: 'error',
              message: res.message
            })
            // 审核不通过成功
            this.selectedReason = ''
            this.dialogFormVisible = false
            this.$message({
              type: 'success',
              message: '审核不通过成功！'
            })
            this.getReports()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消！'
          })    
        })
      },

      failAll() {
        if (this.multipleSelection.length === 0) return this.$message({
          type: 'error',
          message: '没有选中任何数据！'
        })
        this.$confirm('此操作将不通过所有评论举报审核, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.multipleSelection.forEach(item => {
            failAudit(item.report_id).then(res => {
              if (res.status === 1) return this.$message({
                type: 'error',
                message: res.message
              })
              this.getReports()
            })
          })
          // 审核不通过成功
          this.selectedReason = ''
          this.dialogAllVisible = false
          this.$message({
            type: 'success',
            message: '全部审核不通过成功！'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作！'
          })    
        })
      },

      // 获取被举报文章数据
      getReports() {
        // 发送网络请求
        getComment().then(res => {
          if (res.status === 1) console.log(res.message)
          if (res.data) {
            this.reports = res.data
          } else {
            this.reports = []
          }
          if (this.reports.length !== 0) {
            this.reports.forEach(item => {
              if (item.report_detail === "") item.report_detail = "该举报人未提供举报详情"
              // 获取被举报的评论数据
              getCommentById(item.comment_id).then(res => {
                if (res.status === 1) return console.log(res.message)
                this.$set(item, 'comment', res.data)
                // 获取举报人
                getUserById(item.user_id).then(res => {
                  if (res.status === 1) return console.log(res.message)
                  this.$set(item, 'reporter', res.data.user_name)
                })
                // 获取举报原因
                getReasonById(item.report_reason_id).then(res => {
                  if (res.status === 1) return console.log(res.message)
                  this.$set(item, 'report_reason', res.data.report_reason)
                })
                // 获取评论的用户
                getUserById(item.comment.user_id).then(res => {
                  if (res.status === 1) return console.log(res.message)
                  this.$set(item.comment, 'user_name', res.data.user_name)
                })
              })
            })
          }
        })
      }
    },
    watch: {
      dialogFormVisible(val) {
        if (!val) this.selectedReason = ''
      },
      search(val) {
        this.searchComment = this.reports.filter(data => !val || data.comment.content.toLowerCase().includes(val.toLowerCase()) || data.reporter.toLowerCase().includes(val.toLowerCase()))
      }
    },
    created() {
      // 获取待审核文章数据
      this.getReports()
      // 获取审核不通过原因
      getReason().then(res => {
        if (res.data) this.reasons = res.data
      })
    }
  } 
</script>

<style scoped>
  /* 对评论内容列进行多行显示超出隐藏 */
  .el-table__row .el-table__cell:nth-child(3) div {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 25px;
    padding: 0 10px;
  }

  .el-table__row .el-table__cell:nth-child(5) div {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 25px;
    padding: 0 10px;
  }

  /* 设置表格下拉后数据样式 */
  .demo-table-expand {
    font-size: 0;
    margin-left: 100px;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>